<!--摄像头——购买记录-->
<template>
  <div class="ele-body">
    <el-form
      :model="form"
      label-width="80px"
      @keyup.enter.native="submit"
      @submit.native.prevent
    ><el-card
      shadow="never"
      header="购买记录"
      body-style="padding: 30px 22px;"
    >
      <el-row>
        <el-col class="flex-column record-cls" :xs="12" :sm="8" :lg="6" :xl="6" v-for="(i,j) in recordList" :key="j">
          <div>{{i.price}}</div>
          <span>{{i.name}}</span>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col style="height: 60px" :xs="12" :sm="8" :lg="6" :xl="6">
          <el-form-item label="代理名称:" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入代理名称"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col style="height: 60px" :xs="12" :sm="8" :lg="6" :xl="6">
          <el-form-item label="设备名称 :" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入设备名称"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col style="height: 60px" :xs="12" :sm="8" :lg="6" :xl="6">
          <el-form-item label="套餐名称 :" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入套餐名称"
              clearable
            />
          </el-form-item>
        </el-col>

        <el-col style="height: 60px" :xs="12" :sm="12" :lg="6" :xl="6">
          <el-form-item label="创建时间:" prop="datetime">
            <el-date-picker
              v-model="form.datetime"
              type="daterange"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd HH:mm:ss"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="ele-fluid"
              @change="select"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col  :xs="12" :sm="12" :lg="12" :xl="12">
          <el-button
            icon="el-icon-zoom-out"
            size="small"
            type="primary"
            class="colorBlue"
            @click="see()"
          >
            查询
          </el-button>
          <el-button
            icon="el-icon-refresh-right"
            size="small"
            class="resetting-btn"
            @click="resetting()"
          >
            重置
          </el-button>
        </el-col>
      </el-row>
    </el-card>
      <el-card class="m-top10 p-algin10" shadow="never">
        <table-list
          @see="see"
          :form="form"
        />
      </el-card>
    </el-form>
  </div>
</template>

<script>
  import TableList from "./components/table-list";
  export default {
    name: "index",
    components: {TableList},
    data(){
      // 默认表单数据
      const defaultForm = {
        username: '',
        nickname: '',
        deleted: '0',
        sex: undefined
      };
      return{
        form: { ...defaultForm },
        recordList:[
          {
            price:100,
            name:'今日消费'
          },
          {
            price:100,
            name:'本周消费'
          },{
            price:100,
            name:'本月消费'
          },{
            price:100,
            name:'总消费'
          },
        ]
      }
    },
    methods:{
      see(){

      }
    }
  }
</script>

<style lang="less" scoped>
  .record-cls{
    padding: 30px 20px 50px;
    div{
      color: #1E6CEB;
      font-weight: bold;
      font-size: 30px;
      margin-bottom: 11px;
    }
    span{
      color: #666;
      font-size: 16px;
    }
  }
</style>

